<template>
    <header>
        <h1>{{ $route.meta.title }}</h1>
        <ul class="flex">
            <li v-if="loginUser">
                <router-link class="text-bold" :to="{ name: 'UserDetail' }">{{ loginUser.username }}</router-link> |
                <a href="" @click.prevent="logout">退出登录</a>
            </li>
            <li v-else>
                <router-link :to="{ name: 'Login' }">登录</router-link> |
                <router-link :to="{ name: 'Register' }">注册</router-link>
            </li>
            <li><router-link :to="{ name: 'Cart' }">购物车</router-link></li>
            <template v-if="loginUser">
                <li><router-link :to="{ name: 'Order' }">我的订单</router-link></li>
                <li><router-link :to="{ name: 'Manager' }">后台管理</router-link></li>
            </template>
            <li><router-link :to="{ name: 'Home' }">返回首页</router-link></li>
        </ul>
    </header>
</template>

<script>
    import userService from '../service/UserService';

    /**
     * 头部组件
     */
    export default {
        computed: {
            loginUser() {
                return this.$store.state.loginUser.data;
            }
        },
        methods: {
            /**
             * 退出登录
             */
            logout() {
                userService.logout();
                this.$store.commit('loginUser/logout');
            }
        }
    }
</script>

<style lang="less" scoped>
    header {
        width: 90vw;
        height: 10vh;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        padding-bottom: 10px;
        li {
            padding: 0 10px;
        }
    }
</style>